<template>
	<div class="strategyVoltageContent">
		<div class="terminalIndexTreeContent">
			<TreeList2
				v-if="isShow"
				:list="treeData"
				:cocnfig="defaultPropsData"
				:listType="listType"
				:handleNode="treeListNodeClick"
				:handleNodeDelete="treeListNodeDelete"
				:handleNodeAdd="treeListNodeAdd"
				:handleNodeEdit="treeListNodeEdit"
			></TreeList2>
		</div>
		<div class="terminalIndexListContent">
			<div class="strategyMenus">
				<div class="strategyMenusBut">
					<wj-Button type="save" @click="handleBatchOpen">批量关闭</wj-Button>
					<wj-Button type="save" @click="handleBatchClose">批量开启</wj-Button>
				</div>
				<div class="strategyMenusSearch">
					<el-input
						placeholder="请输关键字检索"
						type="text"
						v-model="searchValue"
						@keyup.enter.native="
							(e) => {
								e.target.blur();
							}
						"
						@blur="searchEvent"
					></el-input>
				</div>
			</div>
			<div class="strategyList">
				<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="80"> </el-table-column>
					<el-table-column prop="name" label="前置装置" show-overflow-tooltip></el-table-column>
					<el-table-column prop="smartPowerStatus" label="智能电源状态" width="480">
						<template slot-scope="scope">
							<span v-if="scope.row.smartPowerStatus == 0">已关闭</span>
							<span v-if="scope.row.smartPowerStatus == 1">已开启</span>
              <span v-if="scope.row.smartPowerStatus === 2 || !scope.row.smartPowerStatus">未连接或手动关闸</span>
						</template>
					</el-table-column>
					<el-table-column prop="voltage" label="智能电源电压" width="360"></el-table-column>
					<el-table-column label="操作" width="180" :class-name="'column_row_btn'">
						<template slot-scope="scope">
              <wj-Button type="primary" :disabled="scope.row.smartPowerStatus === 2"
                         @click="handleEveryOpen(scope.$index, scope.row)">关闭
              </wj-Button>
              <wj-Button type="warning" :disabled="scope.row.smartPowerStatus === 2"
                         @click="handleEveryClose(scope.$index, scope.row)">开启
              </wj-Button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="strategyPage">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[11]"
					:page-size="pageSize"
					layout="total, prev, pager, next, jumper"
					:total="total"
				>
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
import TreeList2 from "@/views/common/TreeList2";
import { terminal_all_online, strategy_voltage_every, strategy_voltage_batch, control_terminalGroup } from "@/utils/request/api";
export default {
	name: "StrategyVoltage",
	components: {
		TreeList2,
	},
	inject: ["reload"],
	data() {
		return {
			// 搜索
			searchValue: "",
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 表格数据
			tableData: [],
			multipleSelection: [],
			// 局部刷新树形组件
			isShow: true,
			// 树形组件列表
			treeData: [],
			// 树形组件配置
			defaultPropsData: {
				children: "children",
				label: "groupName",
			},
			// 区分终端组0和关键字库组1和图片库2
			listType: 0,
			// 分组id（用来判断是分组的还是全部的）
			groupIdClick: undefined,
		};
	},
	created() {},
	mounted() {
		// 请求终端分组树形
		this.getTreeListNodeData();
		// 获取所有电源管控
		this.getAllTerminal(this.pageNum, this.pageSize, "");
	},
	methods: {
		// 树形组件节点点击事件
		treeListNodeClick(data) {
			console.log(data);
			this.searchValue = "";
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			this.groupIdClick = data.id;
			this.getTerminalByGroupId(this.pageNum, this.pageSize, "", this.groupIdClick);
		},
		// 节点删除
		treeListNodeDelete(id) {
			console.log("删除" + id);
		},
		// 节点添加
		treeListNodeAdd(groupName) {
			console.log("添加" + groupName);
		},
		// 节点编辑
		treeListNodeEdit(groupName, id) {
			console.log("编辑" + groupName + "---" + id);
		},
		// 树形组件数据获取
		getTreeListNodeData() {
			control_terminalGroup().then((res) => {
				console.log(res);
				if (res.code == 200) {
					// res.data.forEach((element) => {
					// 	this.treeList.push(element);
					// });
					this.recursionTreeList2(res.data).forEach((element) => {
						this.treeData.push(element);
					});
					console.log(this.treeData);
					console.log(this.recursionTreeList2(res.data));
				} else {
					this.$msg.error("终端分组获取失败！");
				}
			});
		},
		// 递归  treeList2组件  添加isEdit属性  添加isRightClick属性(false表示不能右击)
		recursionTreeList2(list) {
			list.forEach((item) => {
				item.isEdit = false;
				item.isRightClick = false;
				if (item.children.length > 0) {
					this.recursionTreeList2(item.children);
				}
			});
			return list;
		},
		// 查询终端/搜索终端
		getAllTerminal(page, size, value) {
			terminal_all_online({
				page: page,
				size: size,
				keyword: value,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableData = res.data.result;
					this.tableData.some((item) => {
            if (item.voltage < 0) {
              item.voltage = 0;
            }
						item.voltage = item.voltage + "V";
					});
					this.total = res.data.total;
					this.pageNum = res.data.pages;
				} else {
					this.$msg.error("终端获取失败！");
				}
			});
		},
		// 搜索
		searchEvent() {
			console.log(this.searchValue);
			this.currentPage = 1;
			this.total = 0;
			this.pageSize = 10;
			this.pageNum = 1;
			if (this.groupIdClick == undefined) {
				this.getAllTerminal(this.pageNum, this.pageSize, this.searchValue);
			} else {
				this.getTerminalByGroupId(this.pageNum, this.pageSize, this.searchValue, this.groupIdClick);
			}
		},
		// 通过分组id获取该组下的终端
		getTerminalByGroupId(page, size, value, id) {
			terminal_all_online({
				page: page,
				size: size,
				keyword: value,
				groupId: id,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableData = res.data.result;
					this.tableData.some((item) => {
						item.voltage = item.voltage + "V";
					});
				} else {
					this.$msg.error("终端获取失败！");
				}
			});
		},
		// 分页组件事件
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			if (this.groupIdClick == undefined) {
				if (this.searchValue != "") {
					this.getAllTerminal(val, this.pageSize, this.searchValue);
				} else {
					this.getAllTerminal(val, this.pageSize, "");
				}
			} else {
				if (this.searchValue != "") {
					this.getTerminalByGroupId(val, this.pageSize, this.searchValue, this.groupIdClick);
				} else {
					this.getTerminalByGroupId(val, this.pageSize, "", this.groupIdClick);
				}
			}
		},
		// 表格选中
		handleSelectionChange(val) {
			this.multipleSelection = val;
			console.log(this.multipleSelection);
		},
		// 单个开闸（关闭）
		handleEveryOpen(index, row) {
			console.log(index, row);
			this.$confirm("是否继续操作智能电源 ?", "温馨提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					// 确认操作
					strategy_voltage_every({
						clientId: row.serial,
						status: 0,
						groupId: this.groupIdClick == undefined ? -1 : this.groupIdClick,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.reload();
							this.$msg.success("操作成功！");
						} else {
							this.$msg.error("操作失败！");
						}
					});
				})
				.catch(() => {
					// 取消操作
					this.$msg.info("已取消操作！");
				});
		},
		// 单个关闸（开启）
		handleEveryClose(index, row) {
			console.log(index, row);
			this.$confirm("是否继续操作智能电源 ?", "温馨提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					// 确认操作
					strategy_voltage_every({
						clientId: row.serial,
						status: 1,
						groupId: this.groupIdClick == undefined ? -1 : this.groupIdClick,
					}).then((res) => {
						console.log(res);
						if (res.code == 200) {
							this.reload();
							this.$msg.success("操作成功！");
						} else {
							this.$msg.error("操作失败！");
						}
					});
				})
				.catch(() => {
					// 取消操作
					this.$msg.info("已取消操作！");
				});
		},
		// 批量开
		handleBatchOpen() {
			this.$confirm("是否继续操作智能电源 ?", "温馨提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					// 确认操作
					var idList = [];
					if (this.groupIdClick == undefined) {
						if (this.multipleSelection.length > 0) {
							this.multipleSelection.forEach((item) => {
								idList.push(item.serial);
							});
						}
						console.log(idList);
						strategy_voltage_batch({
							idList: idList,
							status: 0,
							groupId: -1,
						}).then((res) => {
							console.log(res);
							if (res.code == 200) {
								this.$msg.success("批量开闸操作成功！");
							} else {
								this.$msg.error("批量开闸操作失败！");
							}
						});
					} else {
						if (this.multipleSelection.length > 0) {
							this.multipleSelection.forEach((item) => {
								idList.push(item.serial);
							});
							strategy_voltage_batch({
								idList: idList,
								status: 0,
								groupId: this.groupIdClick,
							}).then((res) => {
								console.log(res);
								if (res.code == 200) {
									this.$msg.success("批量开闸操作成功！");
								} else {
									this.$msg.error("批量开闸操作失败！");
								}
							});
						} else {
							strategy_voltage_batch({
								idList: idList,
								status: 0,
								groupId: this.groupIdClick,
							}).then((res) => {
								console.log(res);
								if (res.code == 200) {
									this.$msg.success("批量开闸操作成功！");
								} else {
									this.$msg.error("批量开闸操作失败！");
								}
							});
						}
					}
				})
				.catch(() => {
					// 取消操作
					this.$msg.info("已取消操作！");
				});
		},
		// 批量关
		handleBatchClose() {
			this.$confirm("是否继续操作智能电源 ?", "温馨提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					// 确认操作
					var idList = [];
					if (this.groupIdClick == undefined) {
						if (this.multipleSelection.length > 0) {
							this.multipleSelection.forEach((item) => {
								idList.push(item.serial);
							});
						}
						console.log(idList);
						strategy_voltage_batch({
							idList: idList,
							status: 1,
							groupId: -1,
						}).then((res) => {
							console.log(res);
							if (res.code == 200) {
								this.$msg.success("批量关闸操作成功！");
							} else {
								this.$msg.error("批量关闸操作失败！");
							}
						});
					} else {
						if (this.multipleSelection.length > 0) {
							this.multipleSelection.forEach((item) => {
								idList.push(item.serial);
							});
							strategy_voltage_batch({
								idList: idList,
								status: 1,
								groupId: this.groupIdClick,
							}).then((res) => {
								console.log(res);
								if (res.code == 200) {
									this.$msg.success("批量关闸操作成功！");
								} else {
									this.$msg.error("批量关闸操作失败！");
								}
							});
						} else {
							strategy_voltage_batch({
								idList: idList,
								status: 1,
								groupId: this.groupIdClick,
							}).then((res) => {
								console.log(res);
								if (res.code == 200) {
									this.$msg.success("批量关闸操作成功！");
								} else {
									this.$msg.error("批量关闸操作失败！");
								}
							});
						}
					}
				})
				.catch(() => {
					// 取消操作
					this.$msg.info("已取消操作！");
				});
		},
	},
};
</script>
<style lang="less" scoped>
.strategyVoltageContent {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: #eee;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	.terminalIndexTreeContent {
		width: 15%;
		height: 100%;
		margin-right: 2px;
		box-sizing: border-box;
		background: #ffffff;
		overflow: hidden;
	}
	.terminalIndexListContent {
		width: 85%;
		height: 100%;
		background: #ffffff;
		padding: 8px;
		box-sizing: border-box;
		.strategyMenus {
			width: 100%;
			height: 48px;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			.strategyMenusBut {
				width: 85%;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				[class*="wj-button-"] {
					font-size: 14px;
					padding: 8px 18px;
					margin-right: 12px;
				}
			}
			.strategyMenusSearch {
				width: 15%;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				/deep/ .el-input {
					font-size: 16px;
				}
			}
		}
		.strategyList {
			width: 100%;
			height: calc(100% - 48px - 48px);
			padding: 28px 0;
			box-sizing: border-box;

			/deep/ .el-table {
				border-left: 1px solid #ebeef5;
				border-right: 1px solid #ebeef5;
				border-top: 1px solid #ebeef5;
			}
			/deep/ .el-link {
				margin: 0 12px 0 0;
			}
			/deep/ .el-table .forbidden-row {
				color: #adaaad;
			}
			/deep/ .el-table .forbidden-cell-read .cell {
				color: #f56c6c;
			}
			/deep/ .el-table .forbidden-cell-unread .cell {
				color: #67c23a;
			}
			/deep/ .el-table .column_row_btn .cell {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}
			/deep/ .el-table .column_row_btn .cell [class*="wj-button-"] {
				font-size: 14px;
				padding: 8px 12px;
			}
		}
		.strategyPage {
			width: 100%;
			height: 48px;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
		}
	}
}
</style>
